<template>
    <view class="wai" v-for="item in orderList" :key="item.id">
        <view class="center">
            <view class="flex-top">
                <view class="center-top1" @click="shopDetas1(item)">
                    <image class="img" :src="item.shop?.logo" mode=""></image>
                    <view>{{ item.shop?.name }}</view>
                </view>
                <view v-if="item.status == 'unpaid'" class="center-top2">待支付</view>
                <view v-if="item.status == 'paid'" class="center-top2">已支付</view>
                <!-- <view v-if="item.status == 'cancel'" class="center-top2">已取消</view> -->
                <!-- <view v-if="item.status=='unpaid'" class="center-top2">已核销</view> -->
            </view>
            <view class="box-list1" v-for="it in item.items" :key="it.id" @click="toOrder(item)">
                <image class="list1-left" :src="it.goods_image" mode=""></image>
                <view class="list1-right">
                    <view class="right1">{{ it.goods_title }}</view>
                    <view class="right2">{{ it.goods_sku_text }}</view>
                    <view class="right3">
                        <view class="box-zuo">
                            <view class="zuo1">￥{{ it.goods_price }}</view>
                        </view>
                        <view class="box-you">×{{ it.goods_num }}</view>
                    </view>
                </view>
            </view>
            <view class="heji">合计￥{{ item.pay_fee }}</view>
            <view class="zhifu">
                <view v-if="item.status == 'unpaid'" class="btn" @click="toOrder(item)">去支付</view>
                <view v-if="item.status == 'paid'" class="btn" @click="wite(item)">核销码</view>
                <view class="btn bgc">已核销</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { utils } from '@/utils/utils.js';
import { getOrder } from '@/api/index.js';
import { onLoad } from '@dcloudio/uni-app';
const isshow = ref(false); //支付弹窗
const orderList = ref([]); //所有订单列表
const total = ref(null); //一共多少订单
const props = defineProps(['pages']); //父组件传来的数据
const emit = defineEmits(['getcode']);
const changdu = ref([]); //列表总长度
onMounted(() => {
    allorder();
});
// 点击商品跳转页面、
const toOrder = (value) => {
    // unpaid=待支付,paid=已支付,待核销
    if (value.status == 'unpaid') {
        uni.navigateTo({
            url: `/pages/sub/daipayment?id=${value.id}`
        });
    }
    if (value.status == 'paid') {
        uni.navigateTo({
            url: `/pages/sub/yipayment?id=${value.id}`
        });
    }
};
// 全部订单列表
const allorder = async () => {
    if (changdu.value.length == total.value) {
        return utils('没有更多数据了...');
    }
    const ret = await getOrder('all', props.pages);
    total.value = ret.data.total;
    changdu.value = [...changdu.value, ...ret.data.data];
    const filteredOrders = ret.data.data.filter((order) => order.status !== 'cancel' && order.status !== 'closed'); //把取消的订单和关闭的订单筛选出去
    orderList.value = [...orderList.value, ...filteredOrders];
    // 如果总列表小于5的话加载下一页
    if (orderList.value.length < 5) {
        emit('getcode');
    }
    console.log(orderList.value);
};
// 点击进入核销码
const wite = (value) => {
    uni.navigateTo({
        url: `/pages/sub/writeOff1?content=${value.order_sn}`
    });
};
// 监听父组触底件传来的页数
watch(
    props,
    (newProps, oldProps) => {
        allorder();
    },
    { immediate: false, deep: false }
);
//点击店铺跳转店铺详情
const shopDetas1 = (item) => {
    uni.navigateTo({
        url: `/pages/sub/details?ids=${item.shop.id}`
    });
};
</script>

<style lang="scss" scoped>
// 支付弹窗
.popup {
    .btn {
        color: #ffffff;
        font-size: 32rpx;
        width: 670rpx;
        height: 98rpx;
        line-height: 98rpx;
        background: #f8bb4f;
        text-align: center;
        border-radius: 20rpx;
        margin: 180rpx auto 20rpx;
    }
    .conter {
        .box-btm {
            .btm-left {
                display: flex;
                align-items: center;
            }
            .img {
                width: 52rpx;
                height: 45rpx;
                margin-right: 14rpx;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 32rpx;
            color: #32394b;
            font-size: 30rpx;
        }
        .flex {
            .left {
                .balance {
                    color: #4e576e;
                }
                .flex-img {
                    width: 48rpx;
                    height: 42rpx;
                    margin-right: 14rpx;
                }
                display: flex;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 108rpx;
            border-bottom: solid 2rpx #dfe3e7;
            color: #32394b;
            font-size: 30rpx;
        }
        padding: 38rpx 24rpx 0 24rpx;
        font-size: 32rpx;
    }
    .top {
        .mony {
            color: #ff9b29;
            margin-left: 16rpx;
        }
        .txt {
            color: #ff9b29;
            font-size: 64rpx;
        }
        text-align: center;
        height: 182rpx;
        line-height: 182rpx;
        color: #32394b;
        font-size: 32rpx;
        border-bottom: solid 20rpx #f6f8fa;
    }
}
.wai {
    // 订单详情·
    .center {
        .zhifu {
            .btn {
                width: 160rpx;
                height: 60rpx;
                text-align: center;
                line-height: 60rpx;
                border-radius: 50rpx;
                background: linear-gradient(85deg, #ff9a01 0%, #ffb901 100%);
            }
            .bgc {
                background: #999999;
            }
            display: flex;
            justify-content: flex-end;
            color: #fff;
        }
        .heji {
            display: flex;
            justify-content: flex-end;
            margin-right: 15rpx;
            margin-bottom: 30rpx;
        }
        .flex-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20rpx;
            .center-top1 {
                .img {
                    width: 60rpx;
                    height: 60rpx;
                    margin-right: 16rpx;
                }
                display: flex;
                align-items: center;
                font-size: 30rpx;
                margin-left: 8rpx;
            }
            .center-top2 {
                color: #f8bb4f;
            }
        }
        .box-list1 {
            .list1-right {
                .box-you {
                    color: #999999;
                    font-size: 28rpx;
                    // font-weight: 700;
                }
                .right3 {
                    .box-zuo {
                        .zuo1 {
                            // font-weight: 700;
                        }
                        display: flex;
                        align-items: center;
                        position: relative;
                    }
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 46rpx;
                }
                .right2 {
                    color: #999999;
                    font-size: 24rpx;
                    margin-top: 12rpx;
                }
                .right1 {
                    font-size: 30rpx;
                }
                width: 518rpx;
            }
            .list1-left {
                width: 160rpx;
                height: 160rpx;
                margin-right: 16rpx;
            }
            display: flex;
            height: 208rpx;
            padding: 20rpx 14rpx 14rpx 24rpx;
        }

        background-color: #fff;
        border-radius: 30rpx;
        padding: 22rpx 16rpx 18rpx 24rpx;
    }
    position: relative;
    margin-bottom: 28rpx;
}
</style>
